import React from 'react';
import { Menu, message } from 'antd';
// import { BUSINESS_INF0 } from 'Constants/config';
import { connect } from 'react-redux';
import './index.scss';

const $ = require('jquery');

const { SubMenu } = Menu;
let isInitFinished = false;//视频插件是否加载完成
class VideoSysPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      jsession: sessionStorage.getItem('jsession') || '',
      vehicles: [],
    };
    this.initVehicleLogin = ::this.initVehicleLogin;
    this.initVehicleVideoPlugin = ::this.initVehicleVideoPlugin;
    this.initVehicleFlash = ::this.initVehicleFlash;
    this.initVehicleList = ::this.initVehicleList;
    this.handlevehicle = ::this.handlevehicle;
    this.mergeDeviceList = ::this.mergeDeviceList;
  }
  componentDidMount() {
    this.initVehicleLogin();
  }
  //init car list
  initVehicleList() {
    $.ajax({
      type: 'GET',
      url: `http://211.162.125.99:8080/StandardApiAction_queryUserVehicle.action?jsession=${this.state.jsession}`,
      cache: false,
      dataType: 'JSONP',
      jsonp: 'callback',
      success: (res) => {
        if (res.result === 0) {
          message.success('获取无人机列表成功');
          this.setState({
            vehicles: res.vehicles
          });
        } else {
          message.warn('获取无人机列表失败');
        }
        console.log(res);
      }
    });
  }
  //init login
  initVehicleLogin() {
    console.log('login');
    $.ajax({
      type: 'POST',
      url: 'http://211.162.125.99:8080/StandardApiAction_loginEx.action',
      data: {
        account: 'zjxh',
        password: '000000'
      },
      cache: false,
      dataType: 'JSONP',
      jsonp: 'callback',
      success: (res) => {
        console.log(res);
        if (res.result === 0) {
          message.success('登入无人机成功');
          sessionStorage.setItem('jsession', res.jsession);
          this.setState({
            jsession: res.jsession
          }, () => {
            this.initVehicleList();
          });
          this.initVehicleVideoPlugin();
        } else {
          message.error('登入无人机失败');
        }
      },
    });
  }
  //初始化视频插件
  initVehicleVideoPlugin() {
    //视频插件初始化参数
    const params = {
      allowFullscreen: 'true',
      allowScriptAccess: 'always',
      bgcolor: '#ffffff',
      wmode: 'transparent'
    };
    //初始化flash
    const self = this;
    swfobject.embedSWF('static/player.swf', 'cmsv6flash', '100%', '100%', '11.0.0', null, null, params, null, (e) => {
      window.player = e.ref;
      setTimeout(() => { self.initVehicleFlash(); }, 1000);
    });
  }
  initVehicleFlash() {
    const self = this;
    if (window.player === null || !window.player.setWindowNum) {
      this.timer = setTimeout(() => { self.initVehicleFlash(); }, 5000);
      message.warn('初始化flash失败');
    } else {
      //设置视频插件的语言
      window.player.setLanguage('http://211.162.125.99:8080/808gps/open/player/cn.xml');
      //先将全部窗口创建好
      window.player.setWindowNum(36);
      //再配置当前的窗口数目
      window.player.setWindowNum(1);
      //设置视频插件的服务器
      window.player.setServerInfo('211.162.125.99', '6605');
      isInitFinished = true;
      message.success('初始化flash成功');
    }
  }
  // 无人机
  //public for business && vehicles
  change(item) {
    if (isInitFinished) {
      document.getElementById('cmsv6flash').style.display = 'block';
      this.handlevehicle(item.item.props.code);
    } else {
      message.warn('flash初始化后查看视频');
    }
  }
  handlevehicle(deId) {
    console.log(deId);
    if (isInitFinished) {
      console.log('test');
      // stop
      window.player.stopVideo(0);
      // window title
      window.player.setVideoInfo(0, `无人机${deId}实时视频`);
      //play
      window.player.startVideo(0, this.state.jsession, deId, 0, 1, true);
      // buffer
      window.player.setBufferTime(0, 2);
    }
  }
  mergeDeviceList() {
    const device = this.state.vehicles.map(item => item.dl.map(de => (de.id)));
    const newDevice = [];
    for (let i = 0, len = device.length; i < len; i++) {
      for (let j = 0, itemLen = device[i].length; j < itemLen; j++) {
        newDevice.push(device[i][j]);
      }
    }
    return newDevice;
  }
  render() {
    const vehicleList = this.state.vehicles.length > 0 ? this.mergeDeviceList() : [];
    return (
      <div className="video-sys-wrapper" >
        <div className="video-sys-container">
          <div className="video-wrap">
            <div className="video" id="video-wrap">
              <div id="cmsv6flash" />
            </div>
          </div>
          <div className="side-wrap">
            <div>
              <div className="video-menu">
                <div className="sys-menu">
                  <Menu
                    style={{ width: 240 }}
                    mode="inline"
                    theme="light"
                    onSelect={this.change.bind(this)}
                    defaultOpenKeys={['vehicle']}
                  >
                    {
                      vehicleList.length > 0 && <SubMenu key="vehicle" title={<span><img src="images/videoSys/icon_no_people.png" className="menu-icon" alt="无人机" /><span>无人机</span></span>}>
                        {
                          vehicleList.map(item => (
                            <Menu.Item key={item} className="submenu" code={item} >无人机{item}</Menu.Item>
                          ))
                        }
                      </SubMenu>
                    }
                  </Menu>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(VideoSysPage);
